<template>
  <div class="orderList">
    <div class="allm">
      <div class="header">
        <div class="header-top">
          <div class="header-top-left">
            <i class="el-icon-search" style=""></i>
            <span style="">筛选搜索</span>
          </div>
          <div class="header-top-right">
            <el-button size="small" @click="empty">重置</el-button>
            <el-button type="primary" size="small" @click="serch"
              >查询搜索</el-button
            >
          </div>
        </div>
        <div class="header-buttom">
          <div>
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="输入搜索:">
                <el-input
                  v-model="formLabelAlign.orderSn"
                  placeholder="订单编号"
                ></el-input>
              </el-form-item>
              <el-form-item label="收货人:">
                <el-input
                  v-model="formInline.receiverKeyword"
                  placeholder="收货人姓名/手机号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="提交时间:">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="请选择时间"
                    v-model="form.createTime"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="订单状态:">
                <el-select v-model="form.status" placeholder="全部">
                  <el-option label="待付款" value="0"></el-option>
                  <el-option label="待发货" value="1"></el-option>
                  <el-option label="已发货" value="2"></el-option>
                  <el-option label="已完成" value="3"></el-option>
                  <el-option label="已关闭" value="4"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单类:">
                <el-select v-model="form.orderType" placeholder="全部">
                  <el-option label="正常订单" value="0"></el-option>
                  <el-option label="秒杀订单" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单来源:">
                <el-select v-model="form.sourceType" placeholder="全部">
                  <el-option label="PC订单" value="0"></el-option>
                  <el-option label="APP订单" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="contain">
        <i class="el-icon-tickets"></i>
        <span>数据列表</span>
      </div>
      <div class="form">
        <el-table
          :data="
            tableData.slice((currpage - 1) * pagesize, currpage * pagesize)
          "
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="80" align="center">
          </el-table-column>
          <el-table-column prop="id" label="编号" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="orderSn"
            label="订单编号"
            width="191"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="提交时间"
            width="192"
            align="center"
          >
          <template slot-scope="scope">
              <p>{{scope.row.createTime| format('yyyy-MM-dd hh:mm:ss')}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="memberUsername"
            label="用户账号"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="totalAmount"
            label="订单金额"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <p>¥{{ scope.row.totalAmount }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="payType"
            label="支付方式"
            width="120"
            align="center"
            :formatter="format1"
          >
          </el-table-column>
          <el-table-column
            prop="sourceType"
            label="订单来源"
            width="120"
            align="center"
            :formatter="format2"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="订单状态"
            width="120"
            align="center"
            :formatter="format3"
          >
          </el-table-column>

          <el-table-column
            prop="status"
            label="操作"
            width="192"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
                >查看订单</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="open(scope.$index, scope.row)"
                v-if="scope.row.status == 4"
                >删除订单</el-button
              >
              <el-button
              
                size="mini"
                @click="dialogTableVisible = true"
                v-if="scope.row.status == 2 || scope.row.status == 1 || scope.row.status ==3"
                >订单跟踪</el-button
              >
              <el-dialog
              title="收货地址"
              :visible.sync="dialogTableVisible"
              width="40%"
            >
              <div style="height: 300px">
                <el-steps
                  direction="vertical"
                  :active="6"
                  finish-status="success"
                >
                  <el-step
                    title="订单已提交,等待付款"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="订单付款成功"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="在北京市进行下级地点扫描,等待付款"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="在分拨中心广东深圳公司进行卸车扫描,等待付款"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="在广东深圳公司进行发出扫描"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="到达目的地网点广东深圳公司,快件将很快进行派送"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                  <el-step
                    title="订单已签收,期待再次为您服务"
                    description="2017-04-01 12:00:00"
                  ></el-step>
                </el-steps>
              </div>
            </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="form-left">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-select
              v-model="formInline.region"
              placeholder="批量操作"
              @change="change"
            >
              <el-option label="删除订单" value="delete"></el-option>
              <el-option label="关闭订单" value="close"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-right">
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currpage"
            :page-size="pagesize"
            :page-sizes="[2, 5, 10, 20]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="stylus">

</style>
<script>
import "../assets/OrderList.css";
export default {
  
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      tsst : [],
      date:[],
      tableData: [],
      labelPosition: "right",
      formLabelAlign: {
        orderSn: "",
        region: "",
        type: "",
        receiverKeyword: "",
      },
      input: "",
      sizeForm: {
        name: "",
        region: "",
        createTime: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formInline: {
        user: "",
        region: "",
      },
      form: {
        name: "",
        orderType: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        sourceType: "",
        status: "",
        createTime: "",
        productPic: "",
      },

      currentPage1: 1,
      pagesize: 10,
      currpage: 1,
      opton: "",
      multipleSelection: "",
    };
  },

  methods: {
    empty() {
      this.formLabelAlign.orderSn = "";
      this.formInline.receiverKeyword = "";
      this.form.createTime = "";
      this.form.status = "";
      this.form.orderType = "";
      this.form.sourceType = "";
    },
    serch() {
       let _that = this;
      this.$axios
        .get(
          "http://192.168.1.147:8080/order/list",
          {
            params: {
              createTime: this.form.createTime,
              orderSn: this.formLabelAlign.orderSn,
              orderType: this.form.orderType,
              receiverKeyword: this.formLabelAlign.receiverKeyword,
              sourceType: this.form.sourceType,
              status: this.form.status,
              pageNum: this.formInline.pageNum,
              pageSize: this.formInline.pageSize,
            },
          }
        )
        .then(function (response) {
          console.log(response.data.data.list);
          console.log(_that.tableData);
          _that.tableData = response.data.data.list;
          console.log(_that.tableData);
        });
    },
    open(index) {
      var idx = this.tableData[index].id;
      console.log(idx);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("http://192.168.1.147:8080/order/delete?ids=" + idx, {})
            .then(function (response) {});
          this.get();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
        this.get();
    },
    onSubmit() {
      console.log("submit!");
      let checkArr = this.multipleSelection;
      let params = [];
      checkArr.forEach(function (item) {
        params.push(item.id);
      });
      console.log(params);
      if (this.opton == "delete") {
        this.$axios
          .post("http://192.168.1.147:8080/order/delete?ids=" + params, {})
          .then(function (response) {});
        this.get();
      } else if(this.opton == "close"){
        this.$axios
          .post("http://192.168.1.147:8080/order/update/close?ids= "+params+"&note=222", {})
          .then(function (response) {});
        this.get();
      }
      this.get();
    },
    change(data) {
      this.opton = data;
      console.log(data);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currpage = val;
    },
    format(i, cellValue) {
      var status = [
        ["未支付", "支付宝", "微信"],
        ["APP订单"],
        ["待发货", "已发货", "已完成", "已关闭"],
      ];
      return status[i][cellValue - 1];
    },
    format1(row, column, cellValue) {
      return this.format(0, cellValue + 1);
    },
    format2(row, column, cellValue) {
      return this.format(1, cellValue);
    },
    format3(row, column, cellValue) {
      return this.format(2, cellValue);
    },

    handleEdit(index, row) {
      this.$router.push({ name: "usersList", params: { data: row } });
    },

    get() {
      let _that = this;
      this.$axios
        .get(
          "http://192.168.1.147:8080/order/list?pageNum=1&pageSize=20&sourceType=1",
          {
            params: {
              createTime: this.form.createTime,
              orderSn: this.formLabelAlign.orderSn,
              orderType: this.form.orderType,
              receiverKeyword: this.formLabelAlign.receiverKeyword,
              sourceType: this.form.sourceType,
              status: this.form.status,
              pageNum: this.formInline.pageNum,
              pageSize: this.formInline.pageSize,
            },
          }
        )
        .then(function (response) {
          console.log(response.data.data.list);
          console.log(_that.tableData);
          _that.tableData = response.data.data.list;
          console.log(_that.tableData);
          let date = [];
          let tsst = [];
          let timeset = response.data.data.list;
          
          timeset.forEach(function (item,index) {
            
           
            date = item.createTime
          _that.tableData[index].createTime = Date.parse(date)
         
          //  _that.tableData.createTime = 
          // let tsst = []
          // tsst.push((parse(date[index])))
          console.log( _that.tableData[index].createTime);
          
          
          
          
      });
          console.log(_that.tableData);
        });
    },
  },

  mounted() {
    this.get();
  },
};
</script>











 